<template>
  <div class="fill">
    <div class="head">
      <div class="home-name">
        <div class="name-text">
          <i class="iconfont icon-shouye1"></i>
          <label>首页</label>
          <i></i>
        </div>
      </div>
    </div>
    <el-scrollbar class="body">
      <div class="body-content">
        <div class="region shadow">
          <div class="dyh">
            <div>
              <img
                style="width: 120px; height: calc(100% - 40px); margin: 20px"
                src="https://demo.buildadmin.com/assets/header-1-DyUuBJUw.svg"
              />
            </div>
            <div
              style="
                width: calc(100% - 40px);
                height: calc(100% - 40px);
                margin: 20px;
              "
            >
              <label class="dyh-xwh">下午好！欢迎回来！</label><br />
              <label
                >开源等于互助；开源需要大家一起来支持，支持的方式有很多种，比如使用、推荐、写教程、保护生态、分享经验、打赏赞助等；欢迎您加入我们！</label
              >
            </div>
          </div>
        </div>
        <div v-loading="data.loading" class="region">
          <!-- 今日指标 -->
          <div class="region-uv-data">
            <div class="jrzb">
              <div class="jrzb-title">
                <div class="jrzb-title-left">今日UV</div>
                <div class="jrzb-title-count">342</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: red">8.67%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">昨日UV</div>
                <div class="jrzb-title-count">442</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: red">9.67%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">新用户</div>
                <div class="jrzb-title-count">42</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: #07f049">24.97%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">近7日UV</div>
                <div class="jrzb-title-count">3432</div>
                <div class="jrzb-title-right">
                  <label style="color: red"></label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">近30日UV</div>
                <div class="jrzb-title-count">32859</div>
                <div class="jrzb-title-right">
                  、
                  <label style="color: red"></label>
                </div>
              </div>
            </div>
            <!-- 客户转化风云榜 -->
            <div class="xxh">
              <div class="xxh-title">
                <label>客户转化风云榜</label>
                <label style="float: right; font-size: 10px; color: #999"
                  >近一个月</label
                >
              </div>
              <div class="xxh-list">
                <el-scrollbar>
                  <div
                    v-for="(item, index) in data.phbdata"
                    class="xxh-list-item"
                    :key="index"
                  >
                    <div :class="index + 1 > 3 ? 'item-xhs' : 'item-xh'">
                      {{ index + 1 }}
                    </div>
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-jdt">
                      <el-progress :percentage="item.bfb" />
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
        <div v-loading="data.loading" class="region">
          <div class="region-operation-data">
            <div class="jhadb" v-loading="data.loading">
              <div class="jhadb-title">
                <div class="jhadb-title-left">
                  <div class="backlog-log">6</div>
                  <div
                    style="background-color: var(--el-color-primary)"
                    class="left-backlog"
                  >
                    <label>待办</label>
                  </div>
                  <div class="backlog-name">
                    <div style="font-size: 13px">待处理事项</div>
                    <div style="font-size: 8px; color: #ddd; margin-top: 2px">
                      2024-11-08
                    </div>
                    <div style="font-size: 10px; color: #999; margin-top: 2px">
                      按时间都是返回顶部卡拉偶i是一定会发生的
                    </div>
                    <div>
                      查看详细<i class="iconfont icon-jiantou_xiangyou"></i>
                    </div>
                  </div>
                </div>
                <div @click="addActivity" class="jhadb-title-left">
                  <div class="backlog-log">1</div>
                  <div style="background-color: #67c23a" class="left-backlog">
                    <label>分布</label>
                  </div>
                  <div class="backlog-name">
                    <div style="font-size: 13px">分布活动</div>
                    <div style="font-size: 8px; color: #ddd; margin-top: 2px">
                      2024-11-08
                    </div>
                    <div style="font-size: 10px; color: #999; margin-top: 2px">
                      按时间都是返回顶部卡拉偶i是一定会发生的
                    </div>
                    <div>
                      查看详细<i class="iconfont icon-jiantou_xiangyou"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="jhadb-title">
                <div @click="underway" class="jhadb-title-left">
                  <div style="background-color: #e87619" class="left-backlog">
                    <label>进行</label>
                  </div>
                  <div class="backlog-name">
                    <div class="backlog-log">2</div>
                    <div style="font-size: 13px">活动进行中</div>
                    <div style="font-size: 8px; color: #ddd; margin-top: 2px">
                      2024-11-08
                    </div>
                    <div style="font-size: 10px; color: #999; margin-top: 2px">
                      按时间都是返回顶部卡拉偶i是一定会发生的
                    </div>
                    <div>
                      查看详细<i class="iconfont icon-jiantou_xiangyou"></i>
                    </div>
                  </div>
                </div>
                <div @click="finish" class="jhadb-title-left">
                  <div class="backlog-log">4</div>
                  <div style="background-color: #e64343" class="left-backlog">
                    <label>结束</label>
                  </div>
                  <div class="backlog-name">
                    <div style="font-size: 13px">历史活动记录</div>
                    <div style="font-size: 8px; color: #ddd; margin-top: 2px">
                      2024-11-08
                    </div>
                    <div style="font-size: 10px; color: #999; margin-top: 2px">
                      按时间都是返回顶部卡拉偶i是一定会发生的
                    </div>
                    <div>
                      查看详细<i class="iconfont icon-jiantou_xiangyou"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="deh" v-loading="data.loading">
              <div id="mainkh" style="width: 100%; height: 100%"></div>
            </div>
            <div class="deh" v-loading="data.loading">
              <div id="mainhy" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
        <div
          style="
            height: 400px;
            border: 1px solid #e8e8e8;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          "
          class="dehs"
          v-loading="data.loading"
        >
          <div id="maincp" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive } from "vue";
import { echarts_PaginationAsync } from "@/api/Vip/Vips";
import { Get_counts } from "@/api/OnlineCustomers/index";
import { LoginAsync_phb } from "@/api/login";
import { useRouter } from "vue-router";

const data = reactive({
  vipdata: [],
  sxxxdata: [],
  phbdata: [],
  loading: false,
});

const router = useRouter();

// 新增活动
const addActivity = () => {
  router.push("/activity/addActivity");
};

// 进行中活动
const underway = () => {
  router.push("/activity/underwayActivity");
};

// 已结束活动
const finish = () => {
  router.push("/activity/finishActivity");
};

const bind = async () => {
  data.loading = true;
  //会员数据-饼图
  const res = await echarts_PaginationAsync();
  if (res.code === 0) {
    data.vipdata = res.data.data;
  }
  //客户数量-饼图
  const resc = await Get_counts();
  if (resc.code === 0) {
    data.sxxxdata = resc.data.data;
  }
  //排行榜
  const resphb = await LoginAsync_phb();
  if (resphb.code === 0) {
    data.phbdata = resphb.data.data;
  }
  data.loading = false;
};

onMounted(async () => {
  await bind();
  // 客户数量绘制图表
  type EChartsOptions = echarts.EChartsOption;
  var chartDom = document.getElementById("mainkh")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOptions;
  option = {
    title: {
      text: "客户数量分布图",
      left: 80,
      top: 8,
      textStyle: {
        fontSize: 14, // 标题字体大小
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: {
        fontSize: 10, // 图例字体大小
      },
    },
    series: [
      {
        name: "客户人数",
        type: "pie",
        radius: "50%",
        data: [
          { value: data.sxxxdata[0].countsx, name: "上线客户" },
          { value: data.sxxxdata[0].countxx, name: "下线客户" },
        ],
        label: {
          show: false, // 是否显示标签
        },
      },
    ],
  };
  option && myChart.setOption(option);

  //会员数量绘制图表
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById("mainhy")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    title: {
      text: "会员客户数量分布图",
      left: 80,
      top: 8,
      textStyle: {
        fontSize: 14, // 标题字体大小
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: {
        fontSize: 8, // 图例字体大小
      },
    },
    series: [
      {
        name: "使用人数",
        type: "pie",
        radius: "30%",
        data: data.vipdata,
        label: {
          show: false, // 隐藏数据标签
        },
      },
    ],
  };
  option && myChart.setOption(option);

  //产品销售量绘制图表
  type EChartsOptionc = echarts.EChartsOption;

  var chartDom = document.getElementById("maincp")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOptionc;

  option = {
    title: {
      text: "产品销售量",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };
  option && myChart.setOption(option);
});
</script>

<style scoped>
.head {
  height: 50px;
}

.body {
  height: calc(100% - 50px);
  background-color: #f4f4f4;
  border-radius: 4px;
}

.body-content {
  padding: 0.1px 0;
}

.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.region {
  margin: 16px;
}

.region-uv-data {
  width: 100%;
  height: 120px;
  display: flex;
}

.region-operation-data {
  width: 100%;
  height: 200px;
  display: flex;
}

.home {
  height: 30px;
  width: 100%;
}

.home-name {
  height: 100%;
  width: 100%;
  display: flex;
}

.name-text {
  width: 200px;
  height: calc(100% - 10px);
  margin-top: 10px;
}

.name-text label {
  font-size: 22px;
  margin: 24px 12px 12px 12px;
}

.dyh-xwh {
  font-size: 30px;
  font-weight: bold;
  color: #1135e6;
}

.home-content {
  width: 100%;
  height: 80px;
  display: flex;
}

.content-text {
  width: 800px;
  height: calc(50px - 10px);
  margin-top: 10px;
  display: flex;
}

.content-btn {
  width: calc(100% - 800px);
  height: calc(50px - 10px);
  margin-top: 10px;
}

.dgjj-btn button {
  background-color: #fbfcfdf8;
}

.deh {
  width: calc(290px - 24px);
  height: 100%;
  margin-left: 20px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  float: right;
  border-radius: 4px;
}

.dehs {
  width: calc(100% - 48px);
  height: 120px;
  margin: 16px 24px 16px 24px;
  display: flex;
  border-radius: 4px;
}

.jhadb {
  width: 800px;
  height: 100%;
}

.jhadb-title {
  width: 100%;
  height: 50%;
  display: flex;
}

.jhadb-title-left {
  position: relative;
  width: calc(50% - 8px);
  background-color: #fff;
  height: calc(100% - 8px);
  margin: 4px 4px 0 4px;
  display: flex;
  font-family: Arial, sans-serif;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s ease;
}

.jhadb-title-left:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
  transform: translateX(-4px);
}

.left-backlog {
  width: calc(98px - 32px);
  height: calc(100% - 32px);
  margin: 16px;
  border-radius: 50%;
  color: #fff;
  background-color: #1135e6;
  text-align: center;
}

.left-backlog label {
  display: inline-block;
  margin-top: 14px;
  font-size: 20px;
}

.dyh {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
}

.xxh {
  width: calc(30% - 4px);
  height: calc(100% - 14px);
  margin: 2px 0 2px 2px;
  background-color: #fff;
  padding: 8px 12px 2px 12px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.xxh-title {
  width: 100%;
  height: 26px;
}

.xxh-list {
  width: 100%;
  height: calc(100% - 26px);
  background-color: #fff;
}
.xxh-list-item {
  width: 100%;
  height: calc(30px - 8px);
  margin: 4px 0 4px 0;
  display: flex;
}
.item-xh {
  width: calc(30px - 4px);
  height: calc(100% -4px);
  margin: 2px 12px 2px 12px;
  background-color: #000;
  color: #fff;
  margin-right: 12px;
  text-align: center;
  border-radius: 50%;
}
.item-xhs {
  width: calc(30px - 4px);
  height: calc(100% -4px);
  margin: 2px 12px 2px 12px;
  background-color: #ddd;
  color: #fff;
  margin-right: 12px;
  text-align: center;
  border-radius: 50%;
}
.item-name {
  width: 100px;
  font-size: 13px;
  padding-top: 2px;
  color: #1e1d1d;
}
.item-jdt {
  width: 340px;
}
.item-jdt .el-progress--line {
  margin-top: 4px;
  margin-bottom: 15px;
  max-width: 400px;
}

.jrzb {
  width: calc(70% - 10px);
  height: calc(100% - 14px);
  margin: 2px 20px 0 2px;
  background-color: #fff;
  padding: 8px 12px 2px 12px;
  display: flex;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.jrzb-title {
  width: calc(17% - 24px);
  height: calc(100% - 24px);
  padding: 12px;
}
.jrzb-title-left {
  font-size: 12px;
  color: #565454;
}
.jrzb-title-count {
  font-size: 30px;
  margin-top: 6px;
}
.jrzb-title-right {
  font-size: 10px;
  color: #706f6f;
  width: 100%;
  margin-top: 6px;
}
.backlog-name {
  width: calc(100% - 90px - 16px);
  height: calc(100% - 32px);
  margin: 16px 16px 16px 0px;
}
.backlog-log {
  position: absolute;
  top: 16px;
  right: 10px;
  font-size: 20px;
  color: red;
}
.icon-jiantou_xiangyou {
  font-size: 18px;
  margin-left: 6px;
  background-color: #000;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
</style>
